<template>
  <div class="bed-cards">
    <template v-for="bed in beds" :key="bed.id">
      <!-- 有患者的床位卡片 -->
      <el-card v-if="bed.patientName" class="bed-card occupied">
        <div class="bed-card-header">
          <div class="header-left">
            <span class="bed-number">{{ bed.bedNumber }}</span>
            <span class="patient-name">{{ bed.patientName }}</span>
          </div>
          <div class="header-right">
            <span class="patient-info">{{ bed.gender }} {{ bed.age }}岁</span>
          </div>
        </div>

        <div class="patient-details">
          <div class="info-container">
            <div class="info-row">
              <span class="label">案例号:</span>
              <span>{{ bed.caseNumber }}</span>
            </div>
            <div class="info-row">
              <span class="label">诊断:</span>
              <span>{{ bed.diagnosis }}</span>
            </div>
            <div class="info-row">
              <span class="label">手术:</span>
              <span>{{ bed.surgery }}</span>
            </div>
            <div class="info-row">
              <span class="label">过敏:</span>
              <span>{{ bed.allergy }}</span>
            </div>
            <div class="info-row">
              <span class="label">主治医生:</span>
              <span>{{ bed.doctor }}</span>
            </div>
            <div class="info-row">
              <span class="label">主任护士:</span>
              <span>{{ bed.nurse }}</span>
            </div>
            <div class="info-row">
              <span class="label">入科时间:</span>
              <span>{{ bed.admissionDate }} ({{ bed.daysIn }}天)</span>
            </div>
          </div>
        </div>

        <div class="action-buttons">
          <el-button type="primary" size="small" @click="scanCode(bed)" plain style="border-radius: 0">
            <template #icon>
              <font-awesome-icon :icon="['fas', 'qrcode']" />
            </template>
            扫码
          </el-button>
          <el-button type="warning" size="small" @click="transferBed(bed)" plain style="border-radius: 0">
            <template #icon>
              <font-awesome-icon :icon="['fas', 'arrows-alt-h']" />
            </template>
            转床
          </el-button>
          <el-button type="danger" size="small" @click="discharge(bed)" plain style="border-radius: 0">
            <template #icon>
              <font-awesome-icon :icon="['fas', 'sign-out-alt']" />
            </template>
            出科
          </el-button>
          <el-icon :color="getCriticalColor(bed.criticalLevel)" style="font-size: 28px">
            <StarFilled />
          </el-icon>
        </div>
      </el-card>

      <!-- 空床位卡片 -->
      <el-card v-else class="bed-card empty">
        <div class="empty-bed">
          <div class="bed-number">{{ bed.bedNumber }}</div>
          <div class="status">{{ bed.status || '空闲' }}</div>
          <el-button type="primary" size="small" @click="admitPatient(bed)" plain>
            <template #icon>
              <font-awesome-icon :icon="['fas', 'sign-in-alt']" />
            </template>
            入科
          </el-button>
        </div>
      </el-card>
    </template>
  </div>
</template>

<script setup lang="ts">
import { ElButton, ElIcon } from 'element-plus'
import { StarFilled } from '@element-plus/icons-vue'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faQrcode, faExchangeAlt, faUserSlash, faUserPlus, faUserInjured, faSignInAlt } from '@fortawesome/free-solid-svg-icons'

const props = withDefaults(defineProps<{
  beds?: Array<{
    id: string
    bedNumber: string
    patientName?: string | null
    gender?: string
    age?: number
    caseNumber?: string
    diagnosis?: string
    surgery?: string
    allergy?: string
    doctor?: string
    nurse?: string
    admissionDate?: string
    daysIn?: number
    criticalLevel?: number
    status?: string
  }>
}>(), {
  beds: () => [
    {
      id: '1',
      bedNumber: '001',
      patientName: null,
      status: '空闲'
    },
    {
      id: '2',
      bedNumber: '002',
      patientName: null,
      status: '空闲'
    }
  ]
})

const emit = defineEmits(['scan', 'transfer', 'discharge', 'admit'])

const scanCode = (bed: any) => {
  emit('scan', bed)
}

const transferBed = (bed: any) => {
  emit('transfer', bed)
}

const discharge = (bed: any) => {
  emit('discharge', bed)
}

const admitPatient = (bed: any) => {
  emit('admit', bed)
}

const getStatusType = (status: string) => {
  switch (status) {
    case '占用': return 'danger'
    case '空闲': return 'success'
    case '维修': return 'warning'
    default: return 'info'
  }
}

const getCriticalColor = (level?: number) => {
  switch (level) {
    case 3: return '#FF0000' // 红色表示最高危急
    case 2: return '#FF9900' // 橙色表示中等危急
    case 1: return '#F7BA2A' // 黄色表示低危急
    default: return '#99A9BF' // 灰色表示无危急
  }
}
</script>

<style scoped>
.bed-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 15px;
  margin-top: 15px;
}

.bed-card {
  transition: all 0.3s;
  padding: 0;
  position: relative;
  overflow: hidden;
}

.bed-card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 25px 25px 0;
  border-color: transparent transparent #ed6d00 transparent;
  box-shadow: -1px 1px 2px rgba(0, 0, 0, 0.1);
}

.bed-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.bed-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  border-bottom: 1px solid #eee;
  padding-bottom: 8px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bed-number {
  font-weight: 700;
  font-size: 18px;
}

.patient-name {
  font-weight: 600;
  font-size: 18px;
}

.patient-info {
  font-size: 14px;
  color: #666;
}

.info-row {
  display: flex;
  margin-bottom: 6px;
  font-size: 13px;
}

.label {
  color: #666;
  min-width: 70px;
  margin-right: 15px;
  text-align: right;
  display: inline-block;
}

.empty-bed {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  height: 100%;
  padding: 20px;
  text-align: center;
  min-height: 180px;
}

.empty-bed .bed-number {
  font-size: 24px;
  font-weight: bold;
  color: #666;
  margin-bottom: 10px;
}

.empty-bed .status {
  font-size: 18px;
  color: #999;
  margin-bottom: 15px;
}

.bed-card.empty {
  background-color: #f9f9f9;
}

.bed-card.empty:hover {
  background-color: #f0f0f0;
}

.action-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #eee;
  gap: 10px;
}

.el-icon {
  margin-left: auto;
  padding-left: 10px;
}
</style>
